<template>
  <div class="container_box">
    <!-- 导航 -->
    <div class="navbar">
      <span v-show="clickItem === ''">全局主题设置</span>
      <span v-show="clickItem">
        {{ useSelectMaterial.cptTitle }}
      </span>
    </div>
    <div class="content">
      <!-- 全局主题设置 -->
      <GlobalStyleOptions v-show="clickItem === ''"></GlobalStyleOptions>
      <!-- 数据配置 -->
      <DataBox v-show="clickItem"></DataBox>
    </div>
  </div>
</template>
<script setup lang="ts">
// import { useResumeJsonStore } from '@/store/resume'
// let userResumeStore = useResumeJsonStore()
import { onMounted, ref, onUnmounted } from 'vue'
import GlobalStyleOptions from '@/options/GlobalStyleOptions.vue'
import DataBox from '@/options/DataBox.vue'
import $bus from '@/bus/index'
import { useSelectMaterialStore } from '@/store/resume'
let useSelectMaterial = useSelectMaterialStore()
const clickItem = ref('')
//接收点击模块的数据
onMounted(() => {
  $bus.on('data', (val: any) => {
    useSelectMaterial.updateSelectMaterial(
      val.cptName,
      val.cptOptionsName,
      val.cptTitle,
      val.keyId,
    )
    clickItem.value = val
    // console.log(clickItem.value)
  })
})
onUnmounted(() => {
  clickItem.value = ''
})
</script>
<style lang="scss" scoped>
@mixin size($w, $h) {
  width: $w;
  height: $h;
}

.container_box {
  background-color: #fff;
}

.navbar {
  @include size(100%, 60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: #ffffff;

  span {
    font-weight: 700;
  }
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
